<template>
  <z-container>
    <z-header height="28px">transfer（穿梭框）</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">default</z-col>
          <z-col :span="15">
          <z-transfer v-model="value1" :data="data1"></z-transfer>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">可搜索</z-col>
          <z-col :span="15">
          <z-transfer filterable :filter-method="filterMethod" v-model="value2" :data="data2" :button-texts="['到左边','到右边']"></z-transfer>
        </z-col>
      </z-row>

      <z-row :gutter="12">
        <z-col :span="3">表格穿梭框-基础用法</z-col>
        <z-col :span="21">
          <z-transfer-table
            v-model="value3"
            :columns="columns1"
            :right-default-checked="[1]"
            :data="data3"
            @change="onCheckChange"
          >
            <template #site="{ row }">
              <span class="site-name">{{ row.site }}</span>
            </template>
            <template #status="{ row }">
              <z-tag :type="row.status ? 'success' : 'warning'">
                {{ row.status ? '正常' : '异常' }}
              </z-tag>
            </template>
          </z-transfer-table>
        </z-col>
      </z-row>

      <z-row :gutter="12">
        <z-col :span="3">表格穿梭框-使用分页</z-col>
        <z-col :span="21">
          <z-transfer-table v-model="value4" :columns="columns1" :data="data4" :pagination="{pageSize: 100}">
            <template #site="{ row }">
              <span class="site-name">{{ row.site }}</span>
            </template>
            <template #status="{ row }">
              <z-tag :type="row.status ? 'success' : 'warning'">
                {{ row.status ? '正常' : '异常' }}
              </z-tag>
            </template>
          </z-transfer-table>
        </z-col>
      </z-row>
  </z-main>
  </z-container>
  
  
</template>
<script>
const columns1 = [
  { prop: 'site', label: '网点', width: 100, showSlot: true },
  { prop: 'status', label: '状态', width: 60, showSlot: true },
  { prop: 'address', label: '管区' }
]

export default{
  name:'cTransfer',
  data(){
    return {
       data1:[],
       value1:[],
       data2:[],
       value2:[],
       columns1,
       value3: [1,4,5],
       data3: [],
       value4: [1,4,5],
       data4: []
    }
  },
  mounted() {
    this.data1 = this.generateData()
    this.data2 = this.generateData2()
    this.data3 = this.generateData3()
    this.data4 = this.generateData4()
  },
  methods: {
    generateData(){
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${ i }`,
          disabled: i % 4 === 0
        });
      }
      return data;
    },
    generateData2(){
      const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
    },
    generateData3() {
      const data = [];
      for (let i = 1; i <= 100; i++) {
        data.push({
          id: i,
          disabled: i % 3 === 0,
          status: i % 4 === 0,
          site: `测试网点名称 ${ i }`,
          address: `深圳市福田区华强北华强路${ i }号`
        });
      }
      return data;
    },
    generateData4() {
      const data = [];
      for (let i = 1; i <= 80050; i++) {
        data.push({
          id: i,
          status: i % 4 === 0,
          site: `测试网点名称 ${ i }`,
          address: `深圳市福田区华强北华强路${ i }号`
        });
      }
      return data;
    },
    filterMethod(query, item){
      return item.pinyin.indexOf(query) > -1;
    },
    onCheckChange(e, a, b) {
      console.log(e, a, b)
    }
  },
}
</script>